<template>
  <div class="exam-list-container">
    <!-- 顶部标题 -->
    <div class="header">
      <h1 class="title">考试列表</h1>
    </div>

    <!-- 搜索框 -->
    <van-search
      v-model="searchQuery"
      placeholder="搜索考试名称"
      class="search-bar"
      :border="false"
    />

    <!-- 状态筛选 -->
    <van-tabs v-model="activeTab" class="status-tabs">
      <van-tab title="全部" />
      <van-tab title="进行中" />
      <van-tab title="已结束" />
    </van-tabs>

    <!-- 考试列表 -->
    <div class="exam-items">
      <van-card
        v-for="exam in examList.exams"
        :key="exam.id"
        class="exam-card"
      >
        <div class="exam-header">
          <h3 class="exam-title">{{ exam.name }}</h3>
          <span class="exam-status">{{ exam.status }}</span>
        </div>
        <div class="exam-info">
          <div class="info-item">
            <van-icon name="calendar" size="16" class="info-icon" />
            <span class="info-text">{{ exam.time }}</span>
          </div>
          <div class="info-item">
            <van-icon name="clock" size="16" class="info-icon" />
            <span class="info-text">考试时长: {{ exam.duration }}分钟</span>
          </div>
          <div class="info-item">
            <van-icon name="file-text" size="16" class="info-icon" />
            <span class="info-text">题目数量: {{ exam.questionCount }}题</span>
          </div>
        </div>
        <div class="action-button">
          <van-button
            type="primary"
            size="small"
            @click="navigateToExamDetail(exam.id)"
          >
            查看详情
          </van-button>
        </div>
      </van-card>
    </div>

    <!-- 底部导航 -->
    <van-tabbar v-model="activeTabBar" class="bottom-tabbar">
      <van-tabbar-item icon="home-o" text="首页" to="/home" />
      <van-tabbar-item icon="search" text="考试" to="/examList" />
      <van-tabbar-item icon="edit" text="日报" to="/dailyReport" />
      <van-tabbar-item icon="chat" text="论坛" to="/forum" />
      <van-tabbar-item icon="user" text="我的" to="/profile" />
    </van-tabbar>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { examListRequest } from '@/api/examApi.js'

export default {
  name: 'ExamList',
  data() {
    return {
      username: '',
      classId: '',
      examList: {},
      searchQuery: '',
      activeTab: 0,
      activeTabBar: 1
    }
  },
  methods: {
    navigateToExamDetail(id) {
      this.$router.push(`/examDetail/${id}`)
    }
  },
  mounted() {
    const user = JSON.parse(localStorage.getItem('user'));
    if (user) {
      console.log(user)
      this.username = user.name;
      this.classId = user.classId;
    }
    examListRequest().then(res => {
      console.log(res)
      this.examList = res;
      console.log(this.examList.exams)
    })
  },
  created() {
    // 初始化路由
    this.$router = useRouter();
  }
}
</script>

<style scoped>
.exam-list-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 15px;
  text-align: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.search-bar {
  margin: 15px;
  background-color: white;
  border-radius: 8px;
  padding: 5px 15px;
}

.status-tabs {
  background-color: white;
}

.exam-items {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}

.exam-card {
  margin-bottom: 15px;
  border-radius: 10px;
  overflow: hidden;
}

.exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.exam-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.exam-status {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 12px;
  background-color: #e8f4ff;
  color: #4e80f1;
}

.exam-info {
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.info-icon {
  color: #888;
  margin-right: 8px;
}

.info-text {
  font-size: 12px;
  color: #666;
}

.action-button {
  display: flex;
  justify-content: center;
}

.bottom-tabbar {
  background-color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
</style>